<template>
	<view :class="['gray-empty']" :style="Bg+Height">
		<!-- 加载状态显示 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-spinner"></view>
			<view class="loading-text">{{ loadingText }}</view>
		</view>
		
		<!-- 非加载状态显示 -->
		<view v-else>
			<image :style="ImgSize" :src="Img" mode="aspectFit"></image>
			<view class="text">{{text}}</view>
			<view class="slot" v-if="$slots.default"> <slot></slot> </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'oEmpty',
		// #ifdef MP-WEIXIN
		options:{ virtualHost:true },
		// #endif
		props:{
			// img：缺省图片,可选值 error network search，支持传入图片URL，图片仅支持jpg/png/svg三种格式
			// imgSize：缺省图尺寸,
			// text：描述文字,
			// bg：背景色
            // height：组件占位最小高度，实际高度看是否被内容撑开
			// loading：是否显示加载状态
			// loadingText：加载状态时的文本
			img:{
				type:String,
				default:'e'
			},
			imgSize:{
				type:[String,Number],
				default:'320'
			},
			text:{
				type:String,
				default:'暂无数据'
			},
			bg:{
				type:String,
				default:'#fff'
			},
            height:{
                type:String,
                default:'480rpx'
            },
			loading:{
				type:Boolean,
				default:false
			},
			loadingText:{
				type:String,
				default:'加载中...'
			}
		},
		data() {
			return {
				list:[
					{
						name:'暂无数据',
						img:'empty'
					},{
						name:'购物车空空如也',
						img:'vehicle'
					} ,{
						name:'加载失败',
						img:'load'
					} ,{
						name:'无权限',
						img:'qx'
					} ,{
						name:'无网络',
						img:'network'
					} ,{
						name:'页面不见了',
						img:'disappear'
					} ,{
						name:'暂无记录',
						img:'record'
					} ,{
						name:'暂无消息',
						img:'msg'
					}       
				]
				
			}
		},
		methods: {
			
		},
		computed: {
			Bg(){ return `backgroundColor:${this.bg};`},
            Height(){
				// 修复判断逻辑，之前的判断有问题
				if(this.height && ['rpx','px','rem','em','vw','vh','%'].some(unit => this.height.endsWith(unit))) {
					return `minHeight:${this.height};`
				} else {
					return `minHeight:${this.height || '480'}rpx;`
				}
			},
			Img(){
				if(this.list.some(el=> el.img == this.img)) {
					return require(`@/subpackages/admin/static/imgs/${this.img}.svg`);
				} else if (this.img && (this.img.endsWith('.jpg') || this.img.endsWith('.png') || this.img.endsWith('.svg'))) {
					return this.img;
				} else {
					return require('@/subpackages/admin/static/imgs/empty.svg')
				}
			},
			ImgSize(){
				if(this.imgSize && ['rpx','px','rem','em','vw','vh','%'].some(unit => String(this.imgSize).endsWith(unit))) {
					return `width:${this.imgSize};height:${this.imgSize};`
				} else {
					return `width:${this.imgSize || '320'}rpx;height:${this.imgSize || '320'}rpx;`
				}
			}
		},
	}
</script>

<style lang="scss">
	.gray-empty{
		display: flex;
		flex-direction: column;
		padding: 64rpx 0!important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
	}
	.center{text-align: center;}
	.text{
		color:#969798;
		padding: 20rpx 0;
	}
	.slot{
		padding-top: 20rpx;
	}
	
	// 加载状态样式
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #eee;
		border-top-color: #969798;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	.loading-text {
		color: #969798;
		padding: 20rpx 0;
		font-size: 28rpx;
	}
	
	@keyframes spin {
		to { transform: rotate(360deg); }
	}
</style>
